Hello and welcome to this lecture.
In this lecture we are going to be creating the structure for the calculate all using age to email.
So this is my text vegetal be using to write the term a quote.
What is this text editor called sublime text.
The way I'm going to structure this lecture is to add chunks of code at a time and then I explain the
code to you rather than you watch me type and take up too much time.
I have added some basic tags these tags that you will find in every web page or every web application.
They are standard tags that you will see.
So let me explain each one very quickly online one.
We've got the doctype the tyred basically is for information and Poppas.
What it does.
It instructs the web browser or any browser that's trying to display it.
It just lets them know that the content of the page is hastier mail.
That's the purpose of the doctype.
They hate email next to each other.
Isn't hastier MIL document.
So the partial hastier melt content is between vaeth number two line number two and line 14.
So any of the content displayed on the web page content starts from the hastier made their decision.
Email Tag here so most tags have an opening a clause in tags so they all come in pairs.
The head note is also it's indented properly so you can tell that the head and the body are both children
of the hastier male element and the title here tag is a child of the head tag me the in between the
head tag is where you find things like the title a link to any success or script or Javascript.
Most times you can you can include them in the headset.
You can also include several met attacks meta tags are used to provide extra information about the document
you are trying to display.
The actual content of the page.
Visit us or anyone sees is between the body tax or anything between the body tag is visible.
I have added some more chunk of code I have added from line for to lying.
Seven.
So there's a few metal attacks here lying for basically is a metal tag.
And he's got an attribute of cast set with a value of utf Dash 8.
The cast said should be basically specifies the character encoding for the hastier male document line
5 here against the lameter tower with Adoree bit of name equals description.
Also we've got another attribute here.
Content equals javascript Coakley top.
So this is descriptive of the document and these information here the metal tag they are used to provide
x-ray information which helps these search engines to display data relevant data.
Line 6 the medick tag here with a name of attribute within with this attribute here code name and value
of viewport.
Notice most of Moore's attributes have the values enclosed in quotes.
So here online 6 the value for this name met a tag name attribute is viewport And there we've also got
the content here and the value is with equal defies dash with.
And he's also got an initial dash scale.
Eek was what.
What the viewport is the viewport.
References refers to these scream that is going to view this calculator so it would resize to weather.
So this one makes this worse.
Makes web page or the Web application display and this kind of kilotons makes it responsive.
That means it will be responsive to any device regardless of the size.
All tool risk size itself to fit that screen device regardless of any device type it will fit the screen
and this initial scho here is just to zoom is initial zoom so if you want to zoom higher you can zoom
as you want in and out of the device.
That's what a scale is just zoom.
Line 7 is a reference to the style sheet that are used in use in this.
This is the stylesheet you have defined here.
So this is just a link to the stylesheet line.
I spoke about landline before is just a title for the calculator So I've added some more code here.
Line 14 and 15 line 14 basically is a head in tag that will use to give a title to the application page.
So that's just what is so hide it head in tag and they be are here.
So break out which means after this my e tool gives space underneath.
That's bezler WHY the break means it means once this once you get to the end of this line create a space
so anything else that needs to follow will come up.
This space has been created using the b-r tag.
I have added some more code on line 16 and 17 lines 16 is have created a form the calculator is going
to be created inside the form saw that imposes everything would be enclosed in the form so the form
I have given it and see equals to my form and have also given it in name equals to calc C whole C so
giving it an attribute So this is an attribute name attribute given it with a name of katic.
Alright so he's got two attributes he wants an idea and one is a name.
He was on line 17 created an input.
Phil this is where the answers fully calculate will be displayed.
So given it in name attributes with a with the value of this plea satterlee let me save this and see
if we can see if we can see the input.
Okay so this is the input we've just created.
And that is the heading tags so we can see the input here.
So the answers for the calculator will be displayed inside this input on line.
A team got on that input tag.
But that type of input is a button.
So do the attribute type here equals value of button and the value of that button will be zero.
So this is where we'll be creating the outro keys for the calculator.
So let me show you.
Let's see what it looks like because all we're going to do is just copy pasted and create the other
keys we can see.
We've just created a zero sum one a copy this saying and change just change a few things and we can
get the rest of dicky's popping up.
So that's just how you create the individual keypads harm the calculator is using this impacts in this
input tag will a type or button.
The value will be the key so be zero followed by a 1 and so on.
Okay I have now added more code to create or the keys will use for key pad for the calculator.
So basically this is how you create the keys.
So the first one will have value of.
This would be key pad 0 1 2 3 and this would be this plus symbol that it is break here means the Lost
Symbol give a break and start a new line.
So we've got 3 4 5 keys.
Then after that we have the minus key and then a break.
Next we go six seven eight and then this is the multiplication symbol and then in break.
This is Number 9 to two add.
Hey this is an entity.
This is what we use to create the division symbol.
Okay so is use.
Notice here we've got you.
So before you show you need to use this entity a similar entity to create the symbol.
So let me say that then you can see how it looks so this should give us the full structure of our app.
I'll just refresh you because we've got all the key pads when need for the calculator.
So we've got this troc Sure.
The hastier most trucks Show in place.
Then the next election will be stylin it to make it look prettier.
That's it for this lecture.
Thanks for watching.
Bye for now.